<template>
  <div class="main">
    <div class="main-image">
      <img src="@/assets/people.png" class="main-img" />
    </div>
    <div class="main-center">
      <Search></Search>
      <HotJobs></HotJobs>
      <div class="cascading-selector">
        <div class="category-list">
          <div
            v-for="category in categories"
            :key="category.id"
            class="category-item"
            @mouseenter="selectCategory(category)"
            @mouseleave="startDeselectionTimer"
          >
            <div class="category-name">
              {{ category.name }}
              <span class="subcategory-names">
                {{ category.subcategories.map((sub) => sub.name).join(' · ') }}
              </span>
            </div>
            <span class="arrow">▶</span>
          </div>
          <div class="pagination">
            <span class="page-number">1 / 3</span>
            <button class="page-button prev" disabled>◀</button>
            <button class="page-button next">▶</button>
          </div>
        </div>
        <div
          class="content-area"
          @mouseenter="clearDeselectionTimer"
          @mouseleave="deselectCategory"
        >
          <div v-if="selectedCategory" class="subcategory-list">
            <h3>{{ selectedCategory.name }}</h3>
            <div class="subcategory-grid">
              <div
                v-for="subcategory in selectedCategory.subcategories"
                :key="subcategory.id"
                class="subcategory-item"
                @mouseenter="selectSubcategory(subcategory)"
              >
                <h4>{{ subcategory.name }}</h4>
                <div class="job-list">
                  <span
                    v-for="job in subcategory.jobs"
                    :key="job"
                    class="job-item"
                  >
                    {{ job }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <Swiper v-else></Swiper>
        </div>
      </div>
    </div>
    <div class="hot-jobs-container">
      <h2 class="title">热招职位</h2>
      <div class="categories">
        <button
          v-for="category in jobcategories"
          :key="category"
          :class="['category-btn', { active: category === activeCategory }]"
          @click="setActiveCategory(category)"
        >
          {{ category }}
        </button>
      </div>
      <JobGrid></JobGrid>
      <button class="view-more-btn">查看更多</button>
    </div>
    <HotCompany></HotCompany>
    <button class="view-more-btn">查看更多</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Search from '@/components/Search.vue'

import HotJobs from './components/HotJobs.vue'
import Swiper from './components/Swiper.vue'
import JobGrid from './components/JobGrid.vue'
import HotCompany from './components/HotCompany.vue'

const categories = [
  {
    id: 1,
    name: '互联网/AI',
    subcategories: [
      { id: 1, name: '开发', jobs: ['Java', 'C/C++', 'PHP'] },
      { id: 2, name: '设计', jobs: ['UI设计', 'UX设计', '平面设计'] }
    ]
  },
  {
    id: 2,
    name: '电子/电气/通信',
    subcategories: [
      { id: 3, name: '硬件', jobs: ['电子工程师', '硬件工程师'] },
      { id: 4, name: '通信', jobs: ['通信工程师', '网络工程师'] }
    ]
  },
  {
    id: 3,
    name: '客服/运营',
    subcategories: [
      {
        id: 5,
        name: '客服',
        jobs: [
          '客服专员',
          '客服主管',
          '客服经理',
          '网络客服',
          '电话客服',
          '售后客服',
          '售前客服'
        ]
      },
      {
        id: 6,
        name: '运营',
        jobs: [
          '内容运营',
          '新媒体运营',
          '直播运营',
          '视频运营',
          '社区运营',
          '微信运营'
        ]
      },
      {
        id: 7,
        name: '电商运营',
        jobs: [
          '国内电商运营',
          '跨境电商运营',
          '品类运营',
          '淘宝运营',
          '天猫运营',
          '京东运营',
          '拼多多运营'
        ]
      },
      {
        id: 8,
        name: '平台运营',
        jobs: ['亚马逊运营', '亚马逊产品开发', '阿里国际站运营', '速卖通运营']
      },
      {
        id: 9,
        name: '业务运营',
        jobs: [
          '运营助理/专员',
          '产品运营',
          '用户运营',
          '商家运营',
          '数据/策略运营',
          '社区运营',
          '游戏运营'
        ]
      },
      {
        id: 10,
        name: '其他运营',
        jobs: [
          '活动运营',
          '网站运营',
          '内容审核',
          '数据标注/AI训练师',
          '外卖运营'
        ]
      },
      {
        id: 11,
        name: '线下运营',
        jobs: ['车辆运营', '线下拓展运营', '商场运营']
      },
      {
        id: 12,
        name: '编辑',
        jobs: ['文案编辑', '主编/副主编', '网站编辑', '医学编辑']
      },
      {
        id: 13,
        name: '高端运营职位',
        jobs: ['运营经理/主管', '运营总监', 'COO', '客服总监']
      },
      { id: 14, name: '其他运营职位', jobs: ['其他运营职位'] }
    ]
  },
  {
    id: 4,
    name: '电子/电气/通信',
    subcategories: [
      { id: 3, name: '硬件', jobs: ['电子工程师', '硬件工程师'] },
      { id: 4, name: '通信', jobs: ['通信工程师', '网络工程师'] }
    ]
  },
  {
    id: 5,
    name: '电子/电气/通信',
    subcategories: [
      { id: 3, name: '硬件', jobs: ['电子工程师', '硬件工程师'] },
      { id: 4, name: '通信', jobs: ['通信工程师', '网络工程师'] }
    ]
  },
  {
    id: 3,
    name: '客服/运营',
    subcategories: [
      {
        id: 5,
        name: '客服',
        jobs: [
          '客服专员',
          '客服主管',
          '客服经理',
          '网络客服',
          '电话客服',
          '售后客服',
          '售前客服'
        ]
      },
      {
        id: 6,
        name: '运营',
        jobs: [
          '内容运营',
          '新媒体运营',
          '直播运营',
          '视频运营',
          '社区运营',
          '微信运营'
        ]
      },
      {
        id: 7,
        name: '电商运营',
        jobs: [
          '国内电商运营',
          '跨境电商运营',
          '品类运营',
          '淘宝运营',
          '天猫运营',
          '京东运营',
          '拼多多运营'
        ]
      },
      {
        id: 8,
        name: '平台运营',
        jobs: ['亚马逊运营', '亚马逊产品开发', '阿里国际站运营', '速卖通运营']
      },
      {
        id: 9,
        name: '业务运营',
        jobs: [
          '运营助理/专员',
          '产品运营',
          '用户运营',
          '商家运营',
          '数据/策略运营',
          '社区运营',
          '游戏运营'
        ]
      },
      {
        id: 10,
        name: '其他运营',
        jobs: [
          '活动运营',
          '网站运营',
          '内容审核',
          '数据标注/AI训练师',
          '外卖运营'
        ]
      },
      {
        id: 11,
        name: '线下运营',
        jobs: ['车辆运营', '线下拓展运营', '商场运营']
      },
      {
        id: 12,
        name: '编辑',
        jobs: ['文案编辑', '主编/副主编', '网站编辑', '医学编辑']
      },
      {
        id: 13,
        name: '高端运营职位',
        jobs: ['运营经理/主管', '运营总监', 'COO', '客服总监']
      },
      { id: 14, name: '其他运营职位', jobs: ['其他运营职位'] }
    ]
  },
  {
    id: 4,
    name: '电子/电气/通信',
    subcategories: [
      { id: 3, name: '硬件', jobs: ['电子工程师', '硬件工程师'] },
      { id: 4, name: '通信', jobs: ['通信工程师', '网络工程师'] }
    ]
  },
  {
    id: 3,
    name: '客服/运营',
    subcategories: [
      {
        id: 5,
        name: '客服',
        jobs: [
          '客服专员',
          '客服主管',
          '客服经理',
          '网络客服',
          '电话客服',
          '售后客服',
          '售前客服'
        ]
      },
      {
        id: 6,
        name: '运营',
        jobs: [
          '内容运营',
          '新媒体运营',
          '直播运营',
          '视频运营',
          '社区运营',
          '微信运营'
        ]
      },
      {
        id: 7,
        name: '电商运营',
        jobs: [
          '国内电商运营',
          '跨境电商运营',
          '品类运营',
          '淘宝运营',
          '天猫运营',
          '京东运营',
          '拼多多运营'
        ]
      },
      {
        id: 8,
        name: '平台运营',
        jobs: ['亚马逊运营', '亚马逊产品开发', '阿里国际站运营', '速卖通运营']
      },
      {
        id: 9,
        name: '业务运营',
        jobs: [
          '运营助理/专员',
          '产品运营',
          '用户运营',
          '商家运营',
          '数据/策略运营',
          '社区运营',
          '游戏运营'
        ]
      },
      {
        id: 10,
        name: '其他运营',
        jobs: [
          '活动运营',
          '网站运营',
          '内容审核',
          '数据标注/AI训练师',
          '外卖运营'
        ]
      },
      {
        id: 11,
        name: '线下运营',
        jobs: ['车辆运营', '线下拓展运营', '商场运营']
      },
      {
        id: 12,
        name: '编辑',
        jobs: ['文案编辑', '主编/副主编', '网站编辑', '医学编辑']
      },
      {
        id: 13,
        name: '高端运营职位',
        jobs: ['运营经理/主管', '运营总监', 'COO', '客服总监']
      },
      { id: 14, name: '其他运营职位', jobs: ['其他运营职位'] }
    ]
  },
  {
    id: 4,
    name: '电子/电气/通信',
    subcategories: [
      { id: 3, name: '硬件', jobs: ['电子工程师', '硬件工程师'] },
      { id: 4, name: '通信', jobs: ['通信工程师', '网络工程师'] }
    ]
  }
  // Add more categories as needed
]

const selectedCategory = ref(null)
let deselectionTimer = null

const selectCategory = (category) => {
  selectedCategory.value = category
}

// const selectSubcategory = (subcategory) => {
//   // This function is called when hovering over a subcategory
//   // You can add additional logic here if needed
// }

const startDeselectionTimer = () => {
  deselectionTimer = setTimeout(() => {
    deselectCategory()
  }, 10000) // 300ms delay before deselecting
}

const clearDeselectionTimer = () => {
  if (deselectionTimer) {
    clearTimeout(deselectionTimer)
  }
}

const deselectCategory = () => {
  selectedCategory.value = null
}

const jobcategories = [
  '精选岗位',
  '附近岗位'
  // '供应链/物流',
  // '销售',
  // '客服/运营',
  // '市场/公关/广告',
  // '技术',
  // '服务业',
  // '生产制造'
]
const activeCategory = ref('精选岗位')

const setActiveCategory = (category) => {
  activeCategory.value = category
}

// const filteredJobs = computed(() => {
//   // In a real application, you would filter jobs based on the active category
//   // For this example, we'll just return all jobs
//   return jobs
// })
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  background-image: linear-gradient(to bottom, #f1f6f8 0%, #eaf2f5 53%);
  .main-image {
    background: #409eff;
    width: 100%;
    height: 7rem;
    .main-img {
      padding-left: 10rem;
      height: 7rem;
    }
  }
  .main-center {
    max-width: 1200px;
    width: 100%;
    margin: auto;
    height: 550px;

    .cascading-selector {
      display: flex;
      font-family: Arial, sans-serif;
      border-radius: 10px;
      overflow: hidden;
    }

    .category-list {
      // width: 600px;
      border-right: 1px solid #e0e0e0;
      background-color: #f9f9f9;
      border-radius: 10px;
    }

    .category-item {
      padding: 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .category-item:hover {
      background-color: #e6f7ff;
    }

    .category-name {
      display: flex;
      margin: 0 5px;
      // flex-direction: column;
    }

    .subcategory-names {
      font-size: 0.8em;
      color: #666;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 250px;
      padding: 0 20px;
    }

    .arrow {
      font-size: 10px;
      color: #999;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      border-top: 1px solid #e0e0e0;
    }

    .page-number {
      margin: 0 10px;
      font-size: 12px;
      color: #666;
    }

    .page-button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 12px;
      color: #1890ff;
    }

    .page-button:disabled {
      color: #d9d9d9;
      cursor: not-allowed;
    }

    .content-area {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .subcategory-list {
      padding: 20px;
    }

    .subcategory-list h3 {
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 18px;
      color: #333;
    }

    .subcategory-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }

    .subcategory-item {
      cursor: pointer;
    }

    .subcategory-item:hover {
      background-color: #f0f0f0;
    }

    .subcategory-item h4 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 16px;
      color: #333;
    }

    .job-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .job-item {
      background-color: #f0f0f0;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 14px;
      color: #333;
    }
  }
}

//
.hot-jobs-container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.categories {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-btn {
  background: none;
  border: none;
  padding: 10px 15px;
  margin: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.category-btn.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.view-more-btn {
  display: block;
  margin: 20px auto 0;
  padding: 10px 20px;
  background-color: #5e9bd9;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.view-more-btn:hover {
  background-color: #409eff;
}
</style>
